<template>
  <div>
    <p>我是mine页</p>
    <!-- 定义二级路由存放坑 -->
    <router-view></router-view>
    <!-- 映射方式: 操作子模块user中的store数据 -->
    <p>store中user模块中的数据age:{{ username }}--{{ age }}</p>
    <p>store中user模块的计算属性tenTimes:{{ tenTimes }}</p>
    <p>
      <button @click="addAge">同步+1</button>
      <button @click="addAgeStep(10)">同步+10</button>
      <button @click="addAgeAsync">异步+1</button>
      <button @click="addAgeStepAsync(10)">异步+10</button>
    </p>
  </div>
</template>

<script>
// 引入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },
  computed: {
    // 语法: ...mapState("模块名", ["数据1", "数据2"]),
    ...mapState("user", ["username", "age"]),
    ...mapGetters("user", ["tenTimes"]),
  },
  methods: {
    ...mapMutations("user", ["addAge", "addAgeStep"]),
    ...mapActions("user", ["addAgeAsync", "addAgeStepAsync"]),
  },
};
</script>
<style scoped>
</style>